<template>
  <el-dialog
    title="选择题目"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <div class="select-body">
      <div class="filter-container">
        <el-form
          :model="query"
          :inline="true"
          size="mini"
          label-position="right"
          label-width="60px"
        >
          <el-form-item label="题目">
            <el-input
              v-model="query.title"
              placeholder="题目"
              suffix-icon="“xxxx”"
            />
          </el-form-item>
          <el-form-item label="知识点">
            <el-input
              v-model="query.pointName"
              placeholder="知识点"
              suffix-icon="“xxxx”"
            />
          </el-form-item>
          <el-form-item label="年份">
            <el-date-picker
              v-model="query.year"
              value-format="yyyy"
              type="year"
              placeholder="选择年份"
            />
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              v-model="query.type"
              size="mini"
              placeholder="请选择题目类型"
            >
              <el-option
                v-for="(key, value) in questionType"
                :key="key"
                :label="key"
                :value="value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="科目">
            <el-select
              v-model="query.subjectId"
              size="mini"
              filterable
              placeholder="请选择科目"
            >
              <el-option
                v-for="subject in subjects"
                :key="subject.id"
                :label="subject.name"
                :value="subject.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="query.status" clearable>
              <el-option label="编辑" value="0" />
              <el-option label="校验中" value="3" />
              <el-option label="审核中" value="4" />
              <el-option label="已审核" value="5" />
              <el-option label="上线" value="1" />
              <el-option label="下线" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              icon="el-icon-search"
              type="primary"
              plain
              @click="getQuestionList()"
              >查询</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-refresh-right"
              @click="resetSearch"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        row-key="id"
        size="mini"
        border
        fit
        highlight-current-row
        style="width: 100%; margin-top: 10px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column
          min-width="200px"
          align="center"
          :show-overflow-tooltip="true"
          label="题目"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.title"></span>
          </template>
        </el-table-column>

        <el-table-column min-width="60" align="center" label="题目类型">
          <template slot-scope="scope">
            <span>{{ questionType[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="50" align="center" label="是否真题">
          <template slot-scope="scope">
            <span>{{ scope.row.isOfficialQuestion ? "是" : "否" }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          class-name="status-col"
          align="center"
          label="题目状态"
          width="140px"
        >
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row | tag">{{
              scope.row | status
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column width="200px" align="center" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.ctime | parseTime }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          v-if="isScore"
          width="180px"
          fixed="right"
          align="center"
          label="分数"
        >
          <template slot-scope="scope">
            <span
              ><el-input-number
                v-model="scope.row.score"
                size="mini"
                :min="1"
              ></el-input-number
            ></span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="query.pageNo"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        :total="query.total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="selectQuestion">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import waves from "@/directive/waves";
import { parseTime } from "@/utils/index";
import { questionList } from "@/api/question.js";
import { getSubjectList } from "@/api/subjectType.js";
export default {
  name: "SelectQuestion",
  directives: { waves },
  filters: {
    parseTime(time) {
      return parseTime(time);
    },
    tag(row) {
      if (row.status === 1) {
        return "success";
      }
      if (row.editStatus !== 1) {
        return "info";
      }
      if (row.checkStatus !== 1) {
        return "warning";
      }
      if (row.reviewStatus === 1) {
        return "success";
      }
      return "";
    },
    status(row) {
      if (row.status === 1) {
        return "上线";
      }
      if (row.status === 0) {
        return row.editPeople + "-编辑中";
      }
      if (row.status == 3) {
        return row.checkPeople + "-校验中";
      }
      if (row.status == 4) {
        return row.reviewPeople + "-审核中";
      }
      if (row.status == 5) {
        return "已审核";
      }
      return "下线";
    }
  },
  data() {
    return {
      questionType: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
        4: "情景题",
        5: "简答题",
        6: "辨析题",
        7: "填空",
        8: "完形填空",
        9: "阅读理解",
        10: "背景题"
      },
      listLoading: false,
      list: [],
      subjects: [],
      query: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      selectIds: [],
      question: {
        status: 0,
        id: 1,
        checkPeople: ""
      }
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    questionIds: {
      type: Array,
      default: []
    },
    isScore: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.getSubject();
    this.getQuestionList();
  },
  methods: {
    handleSelectionChange(val) {
      if (this.isScore) {
        this.selectIds = val.map(res => ({
          id: res.id,
          score: res.score
        }));
      } else {
        this.selectIds = val.map(res => res.id);
      }
    },
    getSubject() {
      getSubjectList().then(res => (this.subjects = res.data));
    },
    getQuestionList() {
      this.listLoading = true;
      this.query.sort = "desc_q.ctime";
      if (!this.query.year) {
        delete this.query.year;
      }
      questionList(this.query).then(res => {
        this.list = res.data;
        if (this.isScore) {
          for (let index = 0; index < this.list.length; index++) {
            this.list[index].score = 1;
          }
        }
        this.query.total = res.page.total;
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.pageNo = 1;
      this.getQuestionList();
    },
    handleCurrentChange(val) {
      this.query.pageNo = val;
      this.getQuestionList();
    },
    handleClose() {
      this.selectIds = [];
      this.resetSearch();
      this.$emit("update:dialogVisible", false);
    },
    resetSearch() {
      this.query = { pageNo: 1, pageSize: 10, total: 0 };
      this.getQuestionList();
    },
    selectQuestion() {
      this.$emit("update:questionIds", this.selectIds);
      this.$emit("selectQuestion");
      this.handleClose();
    }
  }
};
</script>
<style scoped></style>
